কটি এলিমেন্ট ভাসমান(float) হবে কিনা, অর্থাৎ একটি এলিমেন্ট ডানে না বামে থাকবে তা নির্ধারণের জন্য সিএসএস float প্রোপার্টি ব্যবহার করা হয়।
ফ্লোটিং এলিমেন্টসমূহের আচরণ নিয়ন্ত্রণে রাখার জন্য clear প্রোপার্টি ব্যবহার করা হয়।
নিচে দুটি বাটনের সাহায্যে float এবং clear প্রোপার্টির ব্যবহার দেখানো হলোঃ
float:left ব্যবহার করে বামদিকে নেওয়া হয়েছে
float:right ব্যবহার করে ডানদিকে নেওয়া হয়েছে
একটি এলিমেন্ট ভাসমান(float) হবে কিনা তা নির্ধারণ করে।
একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের নিচে(বামে বা ডানে) থাকতে বাধ্য করে।
কন্টেন্ট তার এলিমেন্ট বক্স থেকে উপচে পড়লে(overflow) কি ঘটে তা নির্ধারণ করে।
একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে ডানে বা বামে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।
একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপরে বা নিচে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।
সাধারণত ইমেজের চারপাশকে টেক্সট দিয়ে মোড়ানোর জন্য float প্রোপার্টি ব্যবহার করা হয়।
নিচের উদাহরণে টেক্সটের বামপাশে এবং ডানপাশে ইমেজকে ফ্লোট করে দেখানো হলোঃ
kt_satt_skill_example_id=825
ফ্লোটিং এলিমেন্টের আচরণ নিয়ন্ত্রনের জন্য clear প্রোপার্টি ব্যবহার করা হয়।
সাধারণত float এর কার্যকারিতা এর পরবর্তী এলিমেন্ট গুলো এর উপরে চলে আসে। তাই এটাকে এড়িয়ে যাওয়ার জন্য clear প্রোপার্টি ব্যবহার করা হয়।
একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের কোন পাশে ফ্লোট হওয়া থেকে বাধা দেবে তা নির্ধারণের জন্য clear প্রোপার্টিটি প্রয়োগ করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid teal;
}
.div2 {
border: 1px solid maroon;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid teal;
}
.div4 {
border: 1px solid maroon;
clear: left;
}
</style>
</head>
<body>
<h2>clear ছাড়া কেমন হবে</h2>
<div class="div1">div1</div>
<div class="div2">div2 এ clear প্রোপার্টি ব্যবহার না করায়, div2 এর এলিমেন্ট div1 এ চলে এসেছে।</div>
<h2>clear ব্যবহারের ফলে কেমন হবে</h2>
<div class="div3">div3</div>
<div class="div4">এখানে div3 এর নিচে div4 চলে এসেছে। clear প্রোপার্টির ভ্যালু "left" ব্যবহার করে বামদিকে নিয়ে আসা হয়েছে।
আপনি ইচ্ছে করলে "right" এবং "both" যেকোন কিছু ব্যবহার করতে পারবেন।</div>
</body>
</html>overflow: auto; এর ব্যবহারএকটি এলিমেন্ট যদি তার কন্টেইনারের চেয়ে বড় এবং ফ্লোটিং হয় তাহলে ইহা এর কনটেইনার থেকে উপচে পড়বে।আরেকটি এলিমেন্ট আকারে বড় হয় তাহলে বড় অংশটি কন্টেইনারের বাহিরে ওভারফ্লো করবে।
এই সমস্যা সমাধাণের জন্য আমরা overflow: auto; ব্যবহার করতে পারি।
এই অধ্যায়ের পূর্ববর্তী অধ্যায়ে overflow সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।
float প্রোপার্টি ব্যবহারের মাধ্যমে একটি সাধারণ ওয়েবপেজের লে-আউট তৈরি করে দেখানো হলোঃ
kt_satt_skill_example_id=827
Read more
or
